<!DOCTYPE html>
<html>
<head>
    <title>授权模板管理</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="../../resources/lib/bui/css/bui-min.css" rel="stylesheet">
    <link href="../../resources/lib/bui/css/dpl-min.css" rel="stylesheet">
</head>
<body>
<div class="demo-content">
<button type="button" class="button" onclick="addTemplet()" style="margin-right:10px; width: 110px;">添加节假组</button>
<button type="button" class="button" onclick="removeTemplet()" style="margin-right:10px; width: 70px;">删除</button>
<br>
<div class="row">
    <div class="span4">
        <div class="panel panel-head-borded panel-small">
            <div class="panel-header">节假组列表</div>
            <div id="list1">
            </div>
        </div>
    </div>

    <div class="row">
        <div class="span8">
            <div id="tab"></div>
            <div id="panel" class="bordered" style="padding:0px;">
                <div class="span16">
                    <div class="panel panel-head-borded panel-small">
                        <form name="templetForm" method="" action="" id="templetForm" class="form-horizontal">
                            <div class="row">
                                <div class="control-group span8">
                                    <label class="control-label"><s>*</s>名称：</label>
                                    <div class="controls">
                                        <input name="Name" type="text" class="control-text"data-rules="{required:true}">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="control-group span8">
                                    <label class="control-label"><s>*</s>编号：</label>
                                    <div class="controls">
                                        <input name="Name1" type="text" class="control-text"data-rules="{required:true}">
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="control-group span8" id="s1">
                                    <label class="control-label"><s>*</s>门组所包含的门：</label>
                                    <div class="controls">
                                        <input type="text" id="show" name="show">
                                        <input type="hidden" id="hide" value="" name="hide">
                                    </div>
                                </div>
                            </div>







                            <div class="control-group">
                                <label class="control-label"><s>*</s>备注：</label>
                                <div class="controls control-row-auto">
                                    <textarea name="" id="" class="control-row4 input-large"></textarea>
                                </div>
                            </div>


                            <div class="row form-actions actions-bar">
                                <div class="span13 offset3 ">
                                    <button type="submit" class="button button-primary">保存</button>
                                    <button type="reset" class="button">重置</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div title="时间规则" showclose="true">
                    <div id="Div2" style="margin: 10px; height: 450px;">
                        <form class="l-hidden" name="doorForm2" method="post" action="" id="doorForm2">


                            <div>
                            </div>
                            <table cellpadding="0" cellspacing="0" class="l-table-edit" >

                                <tr>
                                    <td align="right" class="l-table-edit-td">是否采用该规则:</td>
                                    <td align="left" class="l-table-edit-td">
                                        <input name="name" type="checkbox" ltype="checkbox" />
                                    </td>
                                    <td align="left"></td>
                                </tr>
                                <tr>
                                    <td align="right" class="l-table-edit-td">节假日组:</td>
                                    <td align="left" class="l-table-edit-td">
                                        <select name="ddlDepart6" ltype="select">
                                            <option value="1">节假1组</option>
                                            <option value="2">节假2组</option>
                                            <option value="3">节假3组</option>
                                            <option value="4">节假4组</option>
                                            <option value="5">节假5组</option>
                                        </select>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="right" class="l-table-edit-td">时间域组:</td>
                                    <td align="left" class="l-table-edit-td">
                                        <select name="ddlDepart5" ltype="select">
                                            <option value="1">时间1组</option>
                                            <option value="2">时间2组</option>
                                            <option value="3">时间3组</option>
                                            <option value="4">时间4组</option>
                                            <option value="5">时间5组</option>
                                        </select>
                                    </td>
                                </tr>
                            </table>
                            <br />
                            <input type="hidden" name="id" />
                            <input type="hidden" name="pid" />
                            <input type="submit" value="提交" class="button button-primary" />
                            <input type="reset" value="重置" class="button button-primary"/>
                            <br class="l-clear" />
                        </form>

                    </div>
                </div>

                <div title="多人规则" showclose="true">
                    <div id="Div3" style="margin: 10px; height: 450px;">
                        <form class="l-hidden" name="doorForm2" method="post" action="" id="doorForm3">


                            <div>
                            </div>
                            <table cellpadding="0" cellspacing="0" class="l-table-edit" >

                                <tr>
                                    <td align="right" class="l-table-edit-td">是否多人规则:</td>
                                    <td align="left" class="l-table-edit-td">
                                        <input name="name" type="checkbox" ltype="checkbox" />
                                    </td>
                                    <td align="left"></td>
                                </tr>

                                <tr>
                                    <td align="right" class="l-table-edit-td">人数要求:</td>
                                    <td align="left" class="l-table-edit-td">
                                        <select name="ddlDepart" ltype="select">
                                            <option value="1">2</option>
                                            <option value="2">3</option>
                                            <option value="3">4</option>
                                            <option value="4">5</option>
                                        </select>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="right" class="l-table-edit-td">人组要求:</td>
                                    <td align="left" class="l-table-edit-td">
                                        <select name="ddlDepart0" ltype="select">
                                            <option value="1">无要求</option>
                                            <option value="2">有要求无顺序</option>
                                            <option value="3">人组+顺序</option>
                                        </select>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="right" class="l-table-edit-td">人组选择:</td>
                                    <td align="left" class="l-table-edit-td">

                                        <!--<div id="listbox1"></div>-->
                                        <div id="list2">
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="right" class="l-table-edit-td">超时时间（秒）:</td>
                                    <td align="left" class="l-table-edit-td">
                                        <input name="code" type="text" ltype="text" />
                                    </td>
                                    <td align="left"></td>
                                </tr>
                            </table>
                            <br />
                            <input type="hidden" name="id" />
                            <input type="hidden" name="pid" />
                            <input type="submit" value="提交" class="button button-primary" />
                            <input type="reset" value="重置" class="button button-primary"/>
                            <br class="l-clear" />
                        </form>

                    </div>
                </div>

                <div title="门逻辑关系" showclose="false">
                    <div id="Div1" style="margin: 10px; height: 450px;">
                        <form class="l-hidden" name="doorForm1" method="post" action="" id="doorForm1">
                            <div>
                            </div>
                            <table cellpadding="0" cellspacing="0" class="l-table-edit" >
                                <tr>
                                    <td align="right" class="l-table-edit-td">互动模式:</td>
                                    <td align="left" class="l-table-edit-td">
                                        <select name="ddlDepart8" ltype="select">
                                            <option value="1">关联互锁</option>
                                            <option value="2">关联互开</option>
                                            <option value="3">关联互锁互开</option>
                                            <option value="4">前锁后开</option>
                                            <option value="5">前开后锁</option>
                                        </select>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="right" class="l-table-edit-td">相关联门组:</td>
                                    <td align="left" class="l-table-edit-td">
                                        <select name="ddlDepart7" ltype="select">
                                            <option value="1">门组1</option>
                                            <option value="2">门组2</option>
                                            <option value="3">门组3</option>
                                            <option value="4">门组4</option>
                                            <option value="5">门组5</option>
                                        </select>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="right" class="l-table-edit-td">通断时间（秒）:</td>
                                    <td align="left" class="l-table-edit-td">
                                        <input name="code" type="text" ltype="text" />
                                    </td>
                                    <td align="left"></td>
                                </tr>
                            </table>
                            <br />
                            <input type="hidden" name="id" />
                            <input type="hidden" name="pid" />
                            <input type="submit" value="提交" class="button button-primary" />
                            <input type="reset" value="重置" class="button button-primary"/>
                            <br class="l-clear" />
                        </form>

                    </div>
                </div>
            </div>
        </div>
    </div>








</div>
<script src="../../resources/lib/bui/js/jquery-1.8.1.min.js"></script>
<script src="../../resources/lib/bui/js/bui-min.js"></script>
<!-- script start-->
<script type="text/javascript">


    var Tab = BUI.Tab
    var tab = new Tab.TabPanel({
        render : '#tab',
        elCls : 'nav-tabs',
        panelContainer : '#panel',
        selectedEvent : 'mouseenter',//默认为click
        autoRender: true,
        children:[
            {text:'基本信息设置',value:'1'},
            {text:'时间规则',value:'2'},
            {text:'多人规则',value:'3'} ,
            {text:'门逻辑关系',value:'4'}
        ]
    });
    tab.setSelected(tab.getItemAt(0));






    BUI.use(['bui/list'],function(List){
        var items = [
                    { text: '节假组1'},
                    { text: '节假组2'},
                    { text: '节假组3'}
                ],
                list = new List.SimpleList({
                    elCls:'bui-select-list',//默认是'bui-simple-list'
                    width:148,
                    height:700,
                    render : '#list1',
                    items : items
                });
        list.render();
        list.on('itemclick', function(){
            $("#templetForm input[name=Name]").val(list.getSelectedText());
        });
    });


    var form = new Form.HForm({
        srcNode : '#templetForm'
    });
    form.render();

    form.on('beforesubmit',function(){
        if(!editing.isValid()){
            return false;
        }
    });

</script>
<script type="text/javascript">
    BUI.use('bui/calendar',function(Calendar){
        var datepicker = new Calendar.DatePicker({
            trigger:'.calendar',
            autoRender : true
        });
    });

    BUI.use(['bui/picker','bui/tree'],function(Picker,Tree){
//树节点数据，
//text : 文本，
//id : 节点的id,
//leaf ：标示是否叶子节点，可以不提供，根据childern,是否为空判断
//expanded ： 是否默认展开
        var data = [
                    {text : '1',id : '1',children: [{text : '11',id : '11'}]},
                    {text : '2',id : '2',expanded : true,children : [
                        {text : '21',id : '21',children : [{text : '211',id : '211'},{text : '212',id : '212'}]},
                        {text : '22',id : '22'}
                    ]},
                    {text : '3',id : '3'},
                    {text : '4',id : '4'}
                ],
//由于这个树，不显示根节点，所以可以不指定根节点
                tree = new Tree.TreeList({
                    nodes : data,
//dirSelectable : false,//阻止树节点选中
                    showLine : true //显示连接线
                });

        var picker = new Picker.ListPicker({
            trigger : '#show',
            valueField : '#hide', //如果需要列表返回的value，放在隐藏域，那么指定隐藏域
            width:150, //指定宽度
            children : [tree] //配置picker内的列表
        });
        picker.render();

    });

    var List = BUI.List
    var items = [
                {text:'选项1',value:'a'},
                {text:'选项2',value:'b'},
                {text:'选项3',value:'c'},
                {text:"数字值",value:3}
            ],
            list = new List.Listbox({
                elCls:'bui-select-list',//默认是'bui-simple-list'
                width:200,
                render : '#list2',
                items : items
            });
    list.render();
    $('#J_BtnAlert').on('click',function(){
        alert(list.getSelectionText() + '：' + list.getSelectionValues());
    });

</script>
<!-- script end -->
</div>
</body>
</html>